<template>
    <div class="comp-circle-ball">
        <canvas ref="circles" :width="w" height="h"></canvas>
    </div>
</template>

<script type="text/babel">
    export default {
        data() {
            return {
                w: 0,
                h: 0
            };
        },
        props: {

        },
        created(){
            // this.w = document.documentElement.clientWidth || window.innerWidth - 5;
            // this.h = document.documentElement.clientHeight || window.innerHeight - 5;
        },
        mounted() {

            let canvas = this.$refs.circles;
            let ctx = canvas.getContext("2d");

//Set the dimensions of canvas equal to the dimensions of the card
            let W = canvas.width = this.w;
            let H = canvas.height = this.h;

//Number of circles
            let circleNbr = 20;

// Gradient - http://www.planwallpaper.com/static/images/6942095-abstract-background-wallpaper.jpg;
            let bgColor1 = 'rgba(255, 255, 255, 1)';
            let bgColor2 = 'rgba(255, 255, 255, 1)';

//Create an array of circles
            let circles = [];
            for(let i = 0; i < circleNbr; i++ ){
                circles.push(new circle());
            }

//Function to create a circle
            function circle() {
                //Random Position
                this.x = Math.random()*W;
                this.y = Math.random()*H;

                //Random Velocities
                this.vx = 0.2 + Math.random()*0.5;
                this.vy = -this.vx;

                //Random Radius
                this.r = 1 + Math.random()*4;

                //Random opacity color
//                let colors = [
//                    "rgba(255, 255, 255,"+(Math.random()*(1 - .5) + .5).toFixed(1)+")",
//                    "rgba(64, 82, 97,"+(Math.random()*(1 - .5) + .5).toFixed(1)+")",
//                    "rgba(75, 75, 75,"+(Math.random()*(1 - .5) + .5).toFixed(1)+")"
//                ];
//                let n = Math.floor(Math.random() * colors.length + 1)-1;
//                this.color = colors[n];
                this.color = "rgba(181, 222, 255,"+(Math.random()*(1 - .5) + .3).toFixed(1)+")";
            }

//Function to draw the gradient background with the circles
            function draw() {
                ctx.clearRect(0,0,W,H);

                let grd = ctx.createLinearGradient(0, 0, 0, H);
                grd.addColorStop(0, bgColor1);
                grd.addColorStop(1, bgColor2);

                //Fill the canvas with the gradient
                ctx.fillStyle = grd;
                ctx.fillRect(0, 0, W, H);

                var img=new Image();
                img.src="../img/bg1.png";
                ctx.drawImage(img,W/2-382,H-175,763,175);

                //Fill the canvas with the circles
                for(let j = 0; j < circles.length; j++) {
                    let c = circles[j];

                    //Draw the circle
                    ctx.beginPath();
                    ctx.arc(c.x, c.y, c.r, Math.PI*2, false);
                    ctx.fillStyle = c.color;
                    ctx.fill();

                    //Velocity
                    c.x -= c.vx;
                    c.y += c.vy;

                    //When the circles are out of the canvas
                    if(c.x < -20) c.x = W+20;
                    if(c.y < -20) c.y = H+20;
                }
            }
            setInterval(draw, 30);
        },
        methods: {

        }
    }
</script>

<style lang="sass" rel="stylesheet/scss">
    .comp-circle-ball {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-image: url('../img/bg-pc-login.jpg');
        background-repeat: no-repeat;
        background-size: cover;
    }
</style>